<template>
  <div>
     <p>Vue3生命周期</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated} from 'vue'
export default defineComponent({
  name: 'App',
})
</script>
<script setup lang="ts">
  //所有的生命周期方法(6个)全部都是函数呈现,并且可以多次使用
  onBeforeMount(()=>{
    console.log('onBeforeMount');
  })
  onMounted(()=>{
    console.log("onMounted1")
  })
  onMounted(()=>{
    console.log("onMounted2")
  })
  onMounted(()=>{
    console.log("onMounted3")
  })
  onMounted(()=>{
    console.log("onMounted4")
  })

  onBeforeUpdate(()=>{})

  onUpdated(() => {})

  onBeforeUnmount(()=>{})

  onUnmounted(() => {})
</script>
<style lang="less" scoped>

</style>